import { Button, Dropdown, Menu, Modal } from "antd";
import { ButtonNoPadding } from "../../components/lib";
import { useDeleteProject } from "../../hooks/useProjects";
import { Project } from "../../types/project";
import { useProjectModal, useProjectsQueryKey } from "./utils";

export const More = ({ project }: { project: Project }) => {
  const queryKey = useProjectsQueryKey();
  const { editProject: _editProject } = useProjectModal();
  const editProject = (id: number) => () => _editProject(id);
  const { mutate: _deleteProject } = useDeleteProject(queryKey);
  const confirmDeleteProject = (id: number) => () => {
    Modal.confirm({
      title: "确认要删除该项目吗？",
      okText: "确认",
      okType: "danger",
      onOk() {
        _deleteProject({ id });
      },
      cancelText: "取消",
    });
  };

  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item key="edit">
            <Button type="link" onClick={editProject(project.id)}>
              编辑
            </Button>
          </Menu.Item>
          <Menu.Item key="delete">
            <Button type="link" onClick={confirmDeleteProject(project.id)}>
              删除
            </Button>
          </Menu.Item>
        </Menu>
      }
    >
      <ButtonNoPadding type="link">...</ButtonNoPadding>
    </Dropdown>
  );
};
